<template>
  <div id="login">
    <el-card id="box-card">
      <div slot="header" class="clearfix"><span>卡片名称</span></div>
      <el-form
        v-bind:model="userObject"
        label-width="80px"
        :rules="rules"
        ref="userRef"
      >
        <el-form-item
          label="用户名："
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="userObject.username"
            @keyup.enter.native="doLogin('userRef')"
          />
        </el-form-item>
        <el-form-item
          label="密码："
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            type="password"
            v-model="userObject.password"
            @keyup.enter.native="doLogin('userRef')"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doLogin('userRef')"
            >login</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import * as api from "../api";
import * as cm from "../utils/generateMenu";

export default {
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        // if (this.userObject.username !== "") {
        //   this.$refs.userRef.validateField("username");
        // }
        callback();
      }
    };
    var validatePasswd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.userObject.password !== "") {
        //   this.$refs.userRef.validateField("password");
        // }
        callback();
      }
    };
    return {
      formLabelWidth: "120px",
      msg: "hello",
      userObject: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePasswd, trigger: "blur" }]
      }
    };
  },
  created: function() {},
  mounted: function() {},
  // beforeRouteEnter(to, from, next) {
  //   console.log("login beforeRouteEnter to", to);
  //   if (to.path === "/login") {
  //     sessionStorage.clear();
  //   }
  //   next();
  // },
  methods: {
    doLogin: function(formName) {
      let _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          let params = Object.assign({}, { param: _this.userObject });
          let tmp = api
            .login(params)
            .then(rs => {
              if (rs.status === 200) {
                this.$store.dispatch("userLogin", rs.obj);
                cm.generateMenu().then(r => {
                  _this.$router.options.routes.push(...r);
                  console.log(_this.$router.options.routes);
                  _this.$router.addRoutes(_this.$router.options.routes);
                });
                _this.$router.push({ path: "/index" });
              }
            })
            .catch(err => {
              console.log("api login error", err);
            });
          console.log("typeof", tmp);
        }
      });
    }
  }
};
</script>

<style>
#box-card {
  margin: auto;
  width: 480px;
  text-align: center;
}
</style>
